<template>
  <div class="tablevxe">
    <vxe-table
      border
      column-min-width="100px"
      :auto-resize="true"
      resizable
      align="center"
      :data="tableData"
      :edit-config="{ trigger: 'click', mode: 'cell' }"
    >
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        :field="item.name"
        :title="item.title"
        :edit-render="{ name: 'input', attrs: { type: 'text' } }"
      ></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'tablevxe',
  data() {
    return {
      tableData: [],
      tableLabel: {}
    }
  },
  computed: {
    // tjWays() {
    //   return this.chartsConData.ways
    // },
    ...mapState('charts', ['chartData', 'chartsConData'])
  },
  watch: {
    chartData(data) {
      this.tableLabel = []
      this.tableData = data
      let list = JSON.parse(JSON.stringify(data))
      switch (this.chartsConData.type) {
        case '1': // 饼图
          switch (this.chartsConData.ways) {
            case '1': // 媒体来源
              this.tableLabel = [
                { name: 'label', title: '媒体类型' },
                { name: 'value', title: '数据量' },
                { name: 'percent', title: '百分比' }
              ]
              break
            case '5': // 情感
              this.tableLabel = [
                { name: 'label', title: '属性' },
                { name: 'value', title: '数据量' },
                { name: 'percent', title: '百分比' }
              ]
              break
          }
          break
        case '2':
        case '3':
          switch (this.chartsConData.ways) {
            case '1':
              switch (this.chartsConData.type1) {
                case 'z1':
                case 'z4':
                case 'l2':
                  this.tableLabel = [
                    { name: 'label', title: '媒体类型' },
                    { name: 'value', title: '数据量' }
                  ]
                  break
                case 'z3':
                  this.tableLabel = [
                    { name: 'name', title: '媒体类型' },
                    { name: 'value', title: '数据量' }
                  ]
                  break
                default:
                  this.tableLabel = [
                    { name: 'name', title: '媒体类型' },
                    { name: '媒体来源', title: '数据量' }
                  ]
                  break
              }
              break
            case '2':
            case '5':
              switch (this.chartsConData.type1) {
                case 'z1':
                case 'z4':
                case 'l2':
                  this.tableLabel = [
                    { name: 'label', title: '时间' },
                    { name: 'value', title: '数据量' }
                  ]
                  break
                default:
                  this.tableLabel = [{ name: '时间', title: '时间' }]
                  this.tableData = []
                  let obj = { dateArr: [], dataMap: {} }

                  list.forEach(el => {
                    if (obj.dateArr.length === 0) {
                      for (let i in el) {
                        if (i !== 'name') {
                          obj.dateArr.push(i)
                        }
                      }
                    }
                    this.tableLabel.push({ name: el.name, title: el.name })
                    obj.dataMap[el.name] = []
                    for (let i in el) {
                      if (i !== 'name') {
                        obj.dataMap[el.name].push(el[i])
                      }
                    }
                  })
                  list.forEach(item => {
                    obj.dateArr.forEach((item1, index) => {
                      if (item === item1) {
                        obj.dataMap[item.name][index] = item.value
                      }
                    })
                  })
                  obj.dateArr.forEach((item, index) => {
                    this.tableData.push({})
                    this.tableData[this.tableData.length - 1]['时间'] = item
                    for (let key in obj.dataMap) {
                      this.tableData[this.tableData.length - 1][key] =
                        obj.dataMap[key][index]
                    }
                  })
              }
              break
          }
          break
        case '5':
          this.tableLabel = [
            { name: 'name', title: '关键词' },
            { name: 'value', title: '数值' }
          ]
          break
        case '4':
          this.tableLabel = [
            { name: 'name', title: '地域' },
            { name: 'value', title: '数值' }
          ]
          break
      }
    }
  }
}
</script>

<style scoped>
.tablevxe {
  height: 400px;
}
</style>
